<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">基础数据</span>
			<span class="h2">征收项目</span>
			<el-button type="primary" size="small" @click="addZsPro()">添加征收项目</el-button>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="zsxm-box" style="margin-top: 20px;">
				<div class="clearfix">
					<div class="fl">
						<el-form :label-position="labelPosition" border label-width="80px">
							<el-form-item label="征收类别:">
								<el-select v-model="value" clearable filterable placeholder="请选择">
									<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
									</el-option>
								</el-select>
							</el-form-item>
						</el-form>
            <!-- 征收类别固定不允许修改添加，当数据清除后可以打开此按钮添加征收类别 -->
            <!-- <el-button type="primary" @click='adds()'>添加征收类别</el-button> -->
					</div>
					<div class="fr">
						<el-input v-model="search" placeholder="请输入内容" style="width:217px;"></el-input>
						<el-button type="primary" @click='searchs()'>查询</el-button>
					</div>
				</div>
				<el-table :data="proData" border style="width: 100%" :model="formLabelAlign">
					<el-table-column prop="ID" label="ID" align='center'>
					</el-table-column>
					<el-table-column prop="Name" label="征收项目名称" align='center'>
					</el-table-column>
					<el-table-column prop="CategoryStr" label="征收类别" align='center'>
					</el-table-column>
					<el-table-column prop="CategoryID" label="征收类别ID" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="DefineStr" label="定义类型" align='center'>
					</el-table-column>
					<el-table-column prop="Spec" label="备注(可不填)" align='center'>
					</el-table-column>
					<el-table-column prop="StateStr" label="状态" align='center'>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="small" type="success" @click='modiy(scope.row.ID,scope.row.Name,scope.row.DefineID,scope.row.CategoryID,scope.row.Spec)'>修改</el-button>
							<el-button size="small" type="danger" @click='delPro(scope.row.ID)'>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="Popup">
		<!--添加类别-->
		<el-dialog title="类别管理" :visible.sync="lands" width="400px">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="征收类别:">
						<el-input v-model="formLabelAlign.name" placeholder="请输入征收类别名称"></el-input>
					</el-form-item>
					<el-form-item label="定义类型:">
						<el-select v-model="DefineID" placeholder="请选择">
							<el-option v-for="item in typs" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="lands = false">取 消</el-button>
			    <el-button type="primary" @click="landsTrue()">确 定</el-button>
		    </span>
		</el-dialog>
		<!--修改类别-->
		<el-dialog title="修改类别" :visible.sync="lands1" width="400px">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="征收类别:">
						<el-input v-model="formLabelAlign.name"  placeholder="请输入征收类别名称"></el-input>
					</el-form-item>
					<el-form-item label="定义类型:">
						<el-select v-model="DefineID" placeholder="请选择">
							<el-option v-for="item in typs" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="lands1 = false">取 消</el-button>
			    <el-button type="primary" @click="editLand()">确 定</el-button>
		    </span>
		</el-dialog>
		
		<el-dialog title="征收项目" :visible.sync="dialogVisible" width="400px">
			<div>
				<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
					<el-form-item label="征收项目名称:">
						<el-input v-model="formLabelAlign.name"  placeholder="请输入征收项目名称"></el-input>
					</el-form-item>
					<el-form-item label="征收类别:">
						<el-select v-model="value1" filterable placeholder="请选择" @change='changd()'>
							<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="定义类型:">
						<el-select v-model="DefineID" placeholder="请选择" disabled>
							<el-option v-for="item in typs" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注(可不填):">
						<el-input v-model="formLabelAlign.size"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addPro()">确 定</el-button>
			  </span>
		</el-dialog>
		
		<el-dialog title="修改项目" :visible.sync="dialogVisible1" width="400px">
			<div>
				<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
					<el-form-item label="征收项目名称:">
						<el-input v-model="formLabelAlign.name"   placeholder="请输入征收项目名称"></el-input>
					</el-form-item>
					<el-form-item label="征收类别:">
						<el-select v-model="value1" filterable placeholder="请选择" @change='changd()'>
							<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="定义类型:">
						<el-select v-model="DefineID" placeholder="请选择" disabled>
							<el-option v-for="item in typs" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注(可不填):">
						<el-input v-model="formLabelAlign.size"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible1 = false">取 消</el-button>
			    <el-button type="primary" @click="editPro()">确 定</el-button>
			  </span>
		</el-dialog>
		</div>
	</div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "dicType",
  data() {
    return {
      loading: false,
      typs: [
        {
          value: 1,
          label: "土地征收"
        },
        {
          value: 2,
          label: "林木征收"
        },
        {
          value: 3,
          label: "房屋主体"
        },
        {
          value: 4,
          label: "房屋装修"
        },
        {
          value: 5,
          label: "坟山迁移"
        },
        {
          value: 6,
          label: "特殊征拆"
        }
      ], //定义类型
      DefineID: 1,
      pages: 1, //分页页码
      total: 1, //总条数
      value1: "", //新建征收项目征收类别
      search: "", //搜索
      lands: false, //土地类别弹框
      conlld: false, //征收类别弹框
      lands1: false, //土地类别弹框
      conlld1: false, //征收类别弹框
      formLabelAlign: {
        //添加
        name: "",
        region: "",
        type: "",
        size: ""
      }, //词典弹框字段
      dialogVisible1: false, //修改征收项目弹框
      dialogVisible: false, //新建征收项目弹框
      labelPosition: "left",
      types: [], //征收列表
      options: [], //征收类别列表
      value: "", //选择征收类别列表id
      proData: [], //征收项目列表
      conllects: [
        {
          type: "土地"
        }
      ], //征收列表
      landData: [
        {
          land: "土地"
        }
      ], //土地列表
      id: ""
    };
  },
  created() {
    this.cataList(); //获取征收类别
    this.catemList(this.search, this.pages,''); //获取征收项目
  },
  methods: {
    //查询
    searchs() {
      this.pages = 1;
      this.catemList(this.search, this.pages,this.value);
    },
    //分页
    handleCurrentChange(val) {
      this.pages = val;
      this.catemList(this.search, this.pages,this.value);
    },
    //获取征收类别列表
    cataList() {
      this.$get(api.getlistlb)
        .then(response => {
          console.log(response);
          if (response.statusText == "OK" && response.status == 200) {
            this.options = response.data;
            // this.value = this.options[0] ? this.options[0].ID : "";
            this.value1 = this.options[0] ? this.options[0].ID : "";
          } else {
            this.$message.error(response.statusText);
          }
        })
        .catch(err => {
          this.loading=false;
        });
    },
    //获取征收项目列表
    catemList(val, page,id) {
      this.loading = true;
      this.$post(api.catemList, {
        Para: {
          QueryKeyWord: val,
          CategoryID: id
        },
        PageSize: 10,
        PageIndex: page - 1,
        OrderString: "",
        ToExcel: false
      })
        .then(response => {
          console.log(response);
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.proData = response.Data.Data;
            this.total = response.Data.Items ? response.Data.Items : 1;
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //征收项目弹框
    addZsPro() {
      this.value1 = this.options[0] ? this.options[0].ID : "";
      this.changd();
      this.formLabelAlign.name = "";
      this.formLabelAlign.type = "";
      this.formLabelAlign.size = "";
      this.dialogVisible = true;
    },
    //确定添加征收项目
    addPro() {
      if (this.formLabelAlign.name == "") {
        this.$message({
          message: "参数不能为空",
          type: "warning"
        });
        return;
      }
      this.loading = true;
      this.dialogVisible = false;
      this.$post(api.catemAdd, {
        Name: this.formLabelAlign.name,
        DefineID: this.DefineID,
        CategoryId: this.value1,
        Spec: this.formLabelAlign.size
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.loading = true;
            this.search = "";
            this.pages = 1;
            this.catemList(this.search, this.pages,this.value);
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //修改征收项目弹框
    modiy(id, Name, DefineID, CategoryId, Spec) {
      this.id = id;
      this.formLabelAlign.name = Name;
      this.DefineID = DefineID;
      this.value1 = CategoryId;
      this.formLabelAlign.size = Spec;
      this.dialogVisible1 = true;
    },
    //修改征收项目
    editPro() {
      if (this.formLabelAlign.name == "") {
        this.$message({
          message: "参数不能为空",
          type: "warning"
        });
        return;
      }
      this.loading = true;
      this.dialogVisible1 = false;
      this.$post(api.catemUpdate, {
        ID: this.id,
        Name: this.formLabelAlign.name,
        DefineID: this.DefineID,
        CategoryId: this.value1,
        Spec: this.formLabelAlign.size
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.search = "";
            this.pages = 1;
            this.catemList(this.search, this.pages,this.value);
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //删除征收项目
    delPro(id) {
      this.$confirm("将永久删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.$get(api.catemDel + "/" + id)
            .then(response => {
              if (response.data.isOK == true && response.data.state == 200) {
                this.loading = false;
                this.search = "";
                this.pages = 1;
                this.catemList(this.search, this.pages,this.value);
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
              } else {
                this.loading = false;
                this.$message.error(response.data.msg);
              }
            })
            .catch(err => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //添加征收类别
    adds() {
      this.DefineID = 1;
      this.formLabelAlign.name = "";
      this.formLabelAlign.type = "";
      this.lands = true;
    },
    //确定添加
    landsTrue() {
      if (this.formLabelAlign.name == "") {
        this.$message({
          message: "参数不能为空",
          type: "warning"
        });
        return;
      }
      this.loading = true;
      this.$post(api.cataAdd, {
        Name: this.formLabelAlign.name,
        DefineID: this.DefineID
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.cataList();
            this.loading = false;
            this.lands = false;
            this.$message({
              message: "添加成功",
              type: "success"
            });
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //删除征收类别
    dels() {
      this.$confirm("将永久删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.$get(api.cataDel + "/" + this.value)
            .then(response => {
              if (response.data.isOK == true && response.data.state == 200) {
                this.loading = false;
                this.cataList();
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
              } else {
                this.loading = false;
                this.$message.error(response.data.msg);
              }
            })
            .catch(err => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //修改类别
    editst() {
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].ID == this.value) {
          this.formLabelAlign.name = this.options[i].Name;
          this.DefineID = this.options[i].DefineID;
        }
      }
      this.lands1 = true;
    },
    //确认修改类别
    editLand() {
      this.lands1 = false;
      this.loading = true;
      this.$post(api.cataUpdate, {
        ID: this.value,
        Name: this.formLabelAlign.name,
        DefineID: this.DefineID
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.cataList();
            this.$message({
              message: "修改成功",
              type: "success"
            });
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    changd() {
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].ID == this.value1) {
          this.DefineID = this.options[i].DefineID;
        }
      }
    }
  }
};
</script>

<style>
.toptable {
  width: 100%;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
}

.edits .icons {
  color: #409eff;
  cursor: pointer;
  /*font-size: 20px;*/
  margin-right: 5px;
}
.Popup .el-select {
  width: 100% !important;
}
</style>